/*

The following section provides formatting for the the entire site.

*/

/* Styles the body taking into account the width of the side-menu */
body {
  padding-left:250px;
  left:0;
  font-family: Arial, Helvetica, sans-serif;
}

/* jQuery TOOLS tooltip */
.tooltip {
  text-align:left;
  background:#2d89ef;
  display:none;
  font-size:80%;
  min-width:100px;
  max-width:220px;
  padding:15px;
  color:#fff;
  z-index:999;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  border-radius: 3px;
}

/* Transition for page when side menu disappears (below 1080px page width) */
body, #menu, .pure-menu-link {
  -webkit-transition:all 0.2s ease-out;
  -moz-transition:all 0.2s ease-out;
  -ms-transition:all 0.2s ease-out;
  -o-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out
}

/* Formatting for main content, ensuring centering and minimum width so content doesn't get squashed */
#main {
  min-width:800px;
  max-width:1200px;
  margin:0 auto
}

/* Formatting for the side menu */
#menu {
  margin-left:-250px;
  width:250px;
  position:fixed;
  top:0;
  left:250px;
  bottom:0;
  z-index:900;
  background:#191818;
  overflow-x:hidden;
  color:#fff;
  word-wrap:break-word;
  }
#menu a {
  font-weight: lighter;
  border:none;
  white-space:normal;
}
#menu .pure-menu-disabled .menu-item {
  font-weight: lighter;
  border:none;
  white-space:normal;
  padding:5px 20px;
  display:block;
  color: #bfbfbf;
}
#menu .pure-menu-disabled .menu-item:hover {
  background:#2d89ef;
  color:#fff
}
#menu .pure-menu-open {
  background:transparent;
  border:0
}
#menu .pure-menu ul {
  border: none;
  background:transparent
}
#menu .pure-menu ul,#menu .pure-menu .menu-item-divided {
  border-top:1px solid #333
}
#menu .pure-menu li a:hover,#menu .pure-menu li a:focus {
  background: #2d89ef;
  color:#fff
}
#menu .pure-menu-title {
  padding:1em 0;
  font-size: 130%;
  color: #fff;
  text-align:center
}
#menu .pure-menu-heading {
  padding-left:10px;
  font-size: 100%;
  color: #fff;
}
/* The reset button in the menu */
#menu .pure-menu-button {
  text-align:center;
  margin:10px 20px;
  background-color:#333;
  color:#fff;
}
/* Adds a border to separate menu items */
#menu .pure-menu-disabled{
  border-bottom:1px solid #333;
} 
/* Adds a different shade of gray for even menu items */
#menu .recent:nth-child(even) {
  background: #222;
}
/* Hides the side menu for small screen sizes */
@media(max-width: 1080px) {
  body{
    position:relative;
	padding-left:0
  }#menu{
    left:0
  }
}



/*

The following provides formatting for index.html specifically.

*/

/* title bar on index.html*/
.heading {
  line-height:30px;
  font-size:100%;
  margin-top:10px;
  padding-left:10px;
  color:#fff;
  background:#0b67cd;
}

/* Boxes containing form elements */
.contents {
  border:1px solid #bbb;
  border-top:none;
  padding:5px;
  overflow:hidden;
}

/* Makes input forms look more modern */
.contents .input_form {
  border: 1px solid #bbb;
  padding:3px;
  margin:2px;
  background:#fff;
  z-index:0;
}

/* Simulates a table row for each input field and its title/error message */
.row {
  display: table-row;
}

/* Styles the spans as table-cells to allow more consistent formatting upon window resize */
.row [class|='col'] {
  display:table-cell;
  vertical-align:middle;
}

.col-1, .col-3, .col-4 {
  padding:2px;
}

.col-1 {
  line-height:100%;
  width:200px;
  text-align: right;
}

/* Adds spacing either side of .helper and ensures it doesn't get squashed on window resize*/
.col-2 {
  padding-left: 20px;
  padding-right: 20px;
  min-width: 18px;
}

/* Adds some whitespace between error message and form */
.col-4 {
  padding-left: 10px;
}

/* Aligns the title and error message at the top of the large text box without messing up the middle alignment of the other single line inputs */
#big-name, #big-field, #big-error {
  vertical-align: top;
  padding-top: 10px;
}

/* Style for the ? icons*/
.helper {
  cursor: pointer;
  font-size: 70%;
  padding: 3px;
  width: 10px;
  line-height: 10px;
  border-radius: 50%;
  background: #555;
  color: #fff;
  display: block;
  text-align: center;
}

/* Style for the form submit button.*/
#submit {
  cursor:pointer;
  font-size:100%;
  border: none;
  padding:0;
  margin-top:10px;
  margin-left:170px;
  width:200px;
  height:34px;
  background:#555;
  color:#fff
}
#submit:hover {
  background:#2d89ef
}



/*

The following provides formatting for the pages generated from template.html (i.e. the results) specifically.

*/

/* Add some whitespace above the tables so they're not squashed together.*/
#off-target-table_wrapper{
  margin-top: 20px
}
#candidate-target-table_wrapper{
  margin-top: 20px
}

/* Formats the DNA sequence strings in each table to be readable */
td.sequence {
  font-family:"Courier New", Courier, monospace;
  font-size:100%;
}

/* Remove the margin from pre tags (sequence in side menu) to keep consistent with other items */
pre {
  margin:0;
}

/* Colours font green */
.g {
  color: rgb(0, 175, 0);
}
/* Changes font to shade of green to increase contrast */
.row_selected .g {
  color: rgb(75, 255, 75);
}

/* Colours font red */
.r {
  color: rgb(175, 0, 0);
}

/* Colours font blue */
.b {
  color: rgb(0, 0, 255);
}

/* Different shade of blue to increase contrast of blue font in side menu */
#menu .b {
  color: rgb(75, 75, 255);
}

/* Style for the top bar on both tables. */
[class|='title'] {
  float: left;
  line-height: 30px;
  font-size: 110%;
}
